import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link,
    NavLink
} from 'react-router-dom';
import AlertDismissable from 'components/Alert/index.jsx';
import Header from 'components/Header/index.jsx';
import About from 'components/About/index.jsx';
import Topics from 'components/Topics/index.jsx';

import './index.scss';

const BasicExample = () => (
    <Router>
        <div className="content-body">
            <div className="side-nav">
                <ul className="link-list">
                    <li 
                        className="list-item"
                    >
                        <NavLink 
                            to="/"
                            activeClassName="ative"
                        >Root</NavLink>
                    </li>
                    <li 
                        className="list-item"
                    >
                        <NavLink 
                            to="/about"
                            activeClassName="ative"
                        >about</NavLink>
                    </li>
                    <li 
                        className="list-item"
                    >
                        <NavLink 
                            to="/topics"
                            activeClassName="ative"                        
                        >topic</NavLink>
                    </li>
                </ul>
            </div>
            <div className="child-content">
               <Route exact path="/" component={AlertDismissable}/>
               <Route path="/about" component={About}/>
               <Route path="/topics" component={Topics}/>
            </div>
        </div>
    </Router>
)

class Root extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="root">
                <Header />
                <BasicExample />
            </div>
        );
    }
}

export default Root;